<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/user.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">



</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg">
        <span class="blog-title">逻辑博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>

    <div class="user_container">
        <div class="block">
            <div class="img_container">
                <img src="pic/defaultUser.jpg" alt="">
            </div>
            <div class="form_container">
                <form action="" enctype="multipart/form-data" method="post" name="form1" id="form1">
                    更改头像：<input type="file" name="myFile" id="myFile" onchange="getFileContent();" accept="image/*">
                    <button class="submit" onclick="submitAvatar">提交</button>
                </form>
            </div>
            <div class="row2">
                <span class="username">用户名:</span>
                <span class="gotUsername"></span>
            </div>
            <a href="#" class="githubUrl">GitHub 地址</a>
            <div class="row2">
                <span>创作优质文章:</span>
                <div class="goodArticleTitles">

                </div>
            </div>
            <div class="row2">
                <div></div>

            </div>
        </div>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/bootstrap.min.js"></script>

</body>
<script>
    //改
    function submitAvatar() {
        var formData = new FormData();
        formData.append("photo", $('input#photo')[0].files[0]);    //拿到提交的图片文件
        formData.append("userId", $("#userId").val());   //需要把图片和用户关联起来
        $.ajax({
            url: "/changePhoto",
            type: 'POST',
            contentType: false,
            processData: false,
            data: formData,
            success: function (data) {   //请求成功时调用
                $.alert({
                    title: data.code,
                    content: data.msg,
                });
                $("#userUrl").attr("src", data.userUrl); //使用jquery修改图片的src
            },
            error: function (data) {   //请求失败时调用
                $.alert({
                    title: 'Error',
                    content: '修改头像失败，请稍后重试！',
                });
            }
        });
    }


    getUserInfo();
    getUserArticleCounts();
    function getUserInfo() {
        $.ajax({
            url: "/user/getUserInfo",
            type: "get",
            success: function (result) {
                if (result.code == 200 && result.data != null) {
                    $(".user_container .block .row .gotUsername").text(result.data.userName);
                    $(".user_container .block .githubUrl").attr("href", result.data.githubUrl);
                } else {
                    alert("获取用户信息错误");
                    location.href = "blog_login.html";
                }
            }
        });
    }



    function getUserArticleCounts() {
        $.ajax({
            url: "/blog/getUserArticleCounts",
            type: "get",
            success: function (result) {
                if (result.code == 200 && result.data != null) {
                    var count = result.data;
                    $(".user_container .block .row .articleCount").text(count);
                }
            }
        });
    }


    function logout() {
        var isLogOut = confirm("是否退出登录");
        if (isLogOut) {
            localStorage.removeItem("user_token");
            location.href = "blog_login.html";
        }
    }

    function getFileContent() {
        var reader = new FileReader();
        var fileInput = document.getElementById("myFile");
        reader.readAsDataURL(fileInput.files[0]);
        reader.onload = function () {
            var imgs = document.querySelectorAll("img");
            imgs[1].src = reader.result;
            resizeImg(imgs[1], 200, 200);
        }
    }
    function resizeImg(img, maxWidth, maxHeight) {
        var w = img.width,
            h = img.height;
        // 即图片哪边长就完成显示哪一边,其余那边相当于设置auto
        if (w < maxWidth && h < maxHeight) return;
        w / h > maxWidth / maxHeight ? img.width = maxWidth : img.height = maxHeight;
    }



</script>

</html>